<template>
  <a-modal
    title="项目人员调整"
    :width="960"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form-model :model="form" ref="form1" :rules="rules">
      <!--<a-form  :form="form" v-bind="formLayout" >-->
        <a-row :gutter="24">
          <a-col :md="12" :sm="12">
            <a-form-model-item
              label="调整类型"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span:17}, sm: {span: 17} }" prop="type">
              <a-select
                placeholder="请选择调整类型"
                showSearch
                @change="changeAdjust" v-model="form.type">
                <a-select-option v-for="d in groupDatas" :key="d.value" :value="d.value">{{d.text}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>


          <a-col :md="12" :sm="12" v-if="isReplace">
            <a-form-model-item
              label="被更换人员"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span:17}, sm: {span: 17} }" prop="origEmployeeId">
              <a-select placeholder="请选择被更换人员"  v-model="form.origEmployeeId">
                <a-select-option v-for="item in employees" :key="item.staffId" :value="item.staffId" >{{item.staffName}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>

          <a-col :md="12" :sm="12" v-if="isRemove">
            <a-form-model-item
              label="被移除人员"
              :labelCol="{lg: {span: 7}, sm: {span: 7}}"
              :wrapperCol="{lg: {span:17}, sm: {span: 17} }" prop="origEmployeeId">
              <a-select placeholder="请选择被移除人员"  v-model="form.origEmployeeId">
                <a-select-option v-for="item in employees" :key="item.staffId" :value="item.staffId" >{{item.staffName}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>

        <div>
          <a-row :gutter="24">
            <a-col :md="12" :sm="12" v-if="isShow">
              <a-form-model-item
                label="调入人员名称"
                :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                :wrapperCol="{lg: {span:17}, sm: {span: 17} }" prop="employee">
                <a-select show-search
                          placeholder="根据员工姓名搜索"
                          :filter-option="false"
                          :not-found-content="fetching ?undefined : null"
                          @search="getProjectStaff"
                          @focus="getProjectStaff"
                          @change="getStaffInfo"
                          v-model="form.employee">
                  <a-select-option v-for="item in staffs" :disabled="notPeples.filter((i) => i === item.id).length"  :key="item.id"  :value="item.id">{{item.name}}({{item.jobNum}})</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
          <!--<a-row :gutter="24">-->
            <!--<a-col :md="12" :sm="12">-->
              <!--<a-form-model-item-->
                <!--label="调入人员分公司"-->
                <!--:labelCol="{lg: {span: 7}, sm: {span: 7}}"-->
                <!--:wrapperCol="{lg: {span:17}, sm: {span: 17} }">-->
                <!--<BaseInput disabled v-model="branchName" placeholder="无" />-->
              <!--</a-form-model-item>-->
            <!--</a-col>-->
            <!--<a-col :md="12" :sm="12">-->
              <!--<a-form-model-item-->
                <!--label="调入人员所在项目"-->
                <!--:labelCol="{lg: {span: 7}, sm: {span: 7}}"-->
                <!--:wrapperCol="{lg: {span:17}, sm: {span: 17} }">-->
                <!--<BaseInput disabled v-model="projectName" placeholder="无" />-->
              <!--</a-form-model-item>-->
            <!--</a-col>-->
          <!--</a-row>-->
          <!--<a-row :gutter="24">-->
          <!--<a-col :md="12" :sm="12">-->
            <!--<a-form-model-item-->
              <!--label="调入人员当前岗位"-->
              <!--:labelCol="{lg: {span: 7}, sm: {span: 7}}"-->
              <!--:wrapperCol="{lg: {span:17}, sm: {span: 17} }">-->
              <!--<BaseInput disabled v-model="jobName" placeholder="无" />-->
            <!--</a-form-model-item>-->
          <!--</a-col>-->
        <!--</a-row>-->


          <a-row :gutter="24">
            <a-col :md="24" :sm="24">
              <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false"></a-table>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="24" :sm="24">
              <div>
                *备注：该人员之前的项目岗位权限，将在项目立项成功15天后，自动取消。
              </div>
            </a-col>
          </a-row>
        </div>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { getProjectStaff,getInfoByStaffId,getOrgUsers } from '@/api/commons'
import { getJobEmployee,getNotConcurrentlyPeople } from '@/api/project/projects'
import AInputSearch from 'ant-design-vue/es/input/Search'

// 表单字段
const fields = ['projectId','projectJobId','employeeId','staffList', 'employeeAdjustNum','employeeAdjustBranch','projectAdjustId']

const columns = [
  {
    title: '员工名称',
    dataIndex: 'employeeName',
  },
  {
    title: '员工编号',
    dataIndex: 'employeeNum',
  },
  {
    title: '所在单位',
    dataIndex: 'branch',
  },
  {
    title: '所在部门',
    dataIndex: 'projectName',
  },
  {
    title: '当前岗位',
    dataIndex: 'jobName',
  }
]

export default {
  name:'a'+Date.now(),
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    isShowType:{
      type:Number,
      default:0
    },
    employeeNums:{
      type: String,
      default: () => null
    },
    projectId:{
      type: String,
      default:""
    },
    employeeStatus:{
      type: String,
      value:''
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    groupDatas: {
      type: Array,
      default: () => []
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      columns,
      dataSource:[], // 导入人员基础数据

      isReplace:false,  // 是否显示被更换人员
      isRemove:false,   // 是否显示被移除人员
      isShow:false,     // 新增

      rules: {
        type:[{required: true, message: '请选择调整类型', trigger: 'change'}],
        origEmployeeId:[{required: true, message: '请选择移除/更换人员', trigger: 'change'}],
        employee:[{required: true, message: '请选择调入人员', trigger: 'change'}],
      },

      form: {},
      employees:[],
      employeeIds:[],
      staffs:[],   // 调入人员名称
      notPeples:[],   // 不可调入人员名称

      fetching:false

    }
  },
  created () {
    if(this.projectId != "" && this.projectId != undefined){
      this.getNotConcurrentlyPeople()
    }


    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.isShow = false
      this.isReplace = false
      this.isRemove = false

      this.model && this.form.setFieldsValue(pick(this.model, fields))
      this.employees = this.filterByName( this.model.staffList, 0 )

      this.employeeIds = this.employees.map(s=>s.employeeId)
    })

  },
  methods:{
    getNotConcurrentlyPeople(){
      getNotConcurrentlyPeople({projectId:this.projectId}).then(res=>{
        this.notPeples = res.data
      })
    },
     filterByName(aim, statusCode) {   // 移除和更换是只能选择在岗人员
        return aim.filter(item => item.statusCode == statusCode)
     },
    getProjectStaff(value){
      this.fetching = true;
      getOrgUsers({key:value?value:''}).then(res=>{
        this.staffs  =res.data
        this.fetching = false;
      }).catch(()=>{
        this.fetching = false;
      })
    },
    includes(arr1, arr2) {
      return arr2.every(val => arr1.includes(val));
  },

   getStaffInfo(value){   // 获取人员分公司  岗位信息
      let arr = []
      arr.push(value)
      getJobEmployee({ids:arr,projectAuditStatus:2,employeeStatus:0}).then(res=>{
        this.dataSource = res.data
      })
    },
    changeAdjust(item){
      if(item == 2){  // 新增
        this.isShow = true
        this.isReplace = false
        this.isRemove = false
      }
      if(item == 0){  // 更换
        this.isShow = true
        this.isReplace = true
        this.isRemove = false
      }
      if(item == 1){  // 移除
        this.isRemove = true
        this.isReplace = false
        this.isShow = false
      }
    },
  }
}
</script>
